<template>
  <el-dialog
    :title="lang.t('common.info')"
    v-model="show"
    :width="1000"
  >
    <el-row :gutter="20">
      <el-col :span="10">
        <el-descriptions :column="1" border>
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('inbound.account_name') }}
            </template>
            {{ data.account_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('inbound.supplier_id') }}
            </template>
            {{ data.supplier_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('inbound.code') }}
            </template>
            {{ data.code }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('inbound.name') }}
            </template>
            {{ data.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('inbound.time') }}
            </template>
            {{ data.created_at }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('inbound.count') }}
            </template>
            {{ data.count }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="14">
        <el-scrollbar max-height="370px">
          <el-table :data="data.goods" style="width: 100%;">
            <el-table-column :label="plugin.lang('inbound.goods.name')" min-width="150" prop="name">
              <template #default="scope">
                <el-avatar shape="square" v-if="scope.row.goods_image" :size="45" :src="app.img(scope.row.goods_image)" class="goods-image" />
                <div class="goods-name">
                  <div class="item wrap">
                    {{ scope.row.goods_name }}
                  </div>
                  <div class="item wrap code">
                    {{ scope.row.goods_number }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="plugin.lang('inbound.goods.count')" align="center" width="150">
              <template #default="scope">
                <el-link type="primary" href="javascript:;">{{ scope.row.count }}</el-link>
              </template>
            </el-table-column>
            <el-table-column :label="plugin.lang('inbound.goods.price')" align="center" width="120">
              <template #default="scope">
                {{ money(scope.row.price) }}
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'

export default {
  setup() {
    // 对话框
    const show = ref(false)

    // 数据
    const data = ref({})

    // 打开
    const open = row => {
      // 深拷贝
      data.value = Object.assign({}, row)
      // 日期
      data.value.date = data.value.date ? app.time.date(data.value.date) : ''
      data.value.created_at = app.time.date(data.value.created_at)

      show.value = true
    }

    return {
      app,
      lang: app.lang,
      money: app.money,
      plugin: app.plugin.index,
      show,
      open,
      data
    }
  }
}
</script>